<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="专业系统的校园知识导航,一站式学习资源搜索,发现优质学习资源"/>
    <meta name="description" content="Bootstrap 4 HTML5 Multi Purpose One/Multi Pages Template">
    <meta name="keywords" content="bootstrap, responsive, multipurpose, business, corporate, product, product launch, creative, landing page, marketing, software">
    <meta name="author" content="setblue">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>吉商-校园知识导航</title>
    <link rel="icon" href="static/image/logo1.png" type="image/x-icon"/>
 

    <!-- Animate CSS -->
    <link rel="stylesheet" href="static/css/animate.css">

    <!-- Slick CSS -->
    <link rel="stylesheet" href="static/css/slick.css">

    <!-- Google Fonts -->
    <link rel="stylesheet" href="static/css/css.css" type="text/css">

    <!-- Line Icons CSS -->
    <link rel="stylesheet" href="static/css/LineIcons.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">

    <!-- Style CSS -->
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/page.css">
    <!-- label -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    
    <!-- serach -->
    <link rel="stylesheet" href="static/css/search.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <!-- select -->
    <link rel="stylesheet" href="static/css/select.css">
   
    <!-- pass -->
    <link rel="stylesheet" href="static/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">

</head>

<body>


    <!-- Preloader Start -->
    <div class="spinner-wrapper">
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <!-- Preloader Ends -->
    <!-- Navbar Start -->
    <div class="navbar-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- navbar -->
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="index1.html">
                            <img src="static/picture/logo.svg"  alt="Logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo" aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                            <ul class="navbar-nav m-auto">
                                <li class="nav-item"><a href="index1.html">主页</a></li>
                                <li class="nav-item active"><a href="">资源</a></li>
                                <li class="nav-item"><a href="aboutus.html">关于我们</a></li>
                                <li class="nav-item"><a href="pricing.html">书城</a></li>
                                <li class="nav-item"><a href="portfolio.html">文件夹</a></li>
                                <li class="nav-item"><a href="faq.html">疑惑解答</a></li>
                                <li class="nav-item"><a href="contactus.html">联系我们</a></li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        菜单
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="404.html">404</a>
                                        <a class="dropdown-item" href="blog.html">Blog</a>
                                        <a class="dropdown-item" href="login.html">Login</a>
                                        <a class="dropdown-item" href="register.html">Register</a>
                                    </div>
                                </li>
                            </ul>
        
                        </div>

                        <div class="navbar-btn d-none d-sm-inline-block">
                            <ul>
                                <li><a class="solid" href="#">推荐</a></li>
                            </ul>
                        </div>
                    </nav> 
                    <!-- navbar -->
                </div>
            </div>
        </div> <!-- container -->
    </div>
    <!-- Navbar Ends -->
   <!-- Inner Banner Start -->
   <section id="home" class="inner-banner">
    <div class="inner-text">
        <h1>吉林工商学院</h1>
    </div>
            <!-- 搜索框 -->
            <div class="search" style="max-width:200px">
              <form class="example" action="/">
                <input type="text" placeholder="全站搜索资源..." name="search">
                <button type="submit"><i class="fa fa-search"></i></button>
              </form>

            </div>

    
    <div id="particles-1" class="particles"></div>
</section>
<!-- Inner Banner Ends -->

 <!-- Services Start -->
 <section class="section bg-light">
    <div class="container">
        <div class="title-block mx-auto">

        <!-- pass -->
        <!-- <div class="sel01" id='qw'>
          <select v-model="selectClassEnd" @change="selectClass($event)">
              <option value="NONE">筛选</option>
              <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
                  {{options.title}}
              </option>
          </select>
      </div> -->
      <div class="layui-btn-container">
        <button class="layui-btn" id="demo100">
          筛选
        </button>
    </div>


    <script src="static/js/layui.js"></script>
    <script>
      layui.use(['dropdown', 'util', 'layer', 'table'], function(){
        var dropdown = layui.dropdown
        ,util = layui.util
        ,layer = layui.layer
        ,table = layui.table
        ,$ = layui.jquery;
        
  
       
        
        //高级演示 - 各种组合
        dropdown.render({
          elem: '#demo100'
          ,data: [
             //第1行
          {
            title: 'menu item 1'
            ,id: 1
            ,child: [{
              title: 'menu item 1-1'
              ,id: 11
              ,child: [{
                title: 'menu item 1-1-1'
                ,id: 111
              },{
                title: 'menu item 1-1-2'
                ,id: 1111
              },{
                title: 'menu item 1-1-3'
                ,id: 11111
              }]
            },{
              title: 'menu item 1-2'
              ,id: 12
            },{
              title: 'menu item 1-3'
              ,id: 13
            }]
          },
          {type: '-'}, 
          //第2行
          {
            title: 'menu item 2'
            ,id: 2
            ,child: [{
              title: 'menu item 2-1'
              ,id: 22
              ,child: [{
                title: 'menu item 2-1-1'
                ,id: 222
              },{
                title: 'menu item 2-1-2'
                ,id: 2222
              },{
                title: 'menu item 2-1-3'
                ,id: 22222
              }]
            },{
              title: 'menu item 2-2'
              ,id: 22
            },{
              title: 'menu item 2-3'
              ,id: 23
            }]
          },
          {type: '-'}, //分割线
          //第3行
          {
            title: 'menu item 3'
            ,id: 3
            ,child: [{
              title: 'menu item 3-1'
              ,id: 33
              ,child: [{
                title: 'menu item 3-1-1'
                ,id: 333
              },{
                title: 'menu item 3-1-2'
                ,id: 3333
              },{
                title: 'menu item 3-1-3'
                ,id: 33333
              }]
            },{
              title: 'menu item 3-2'
              ,id: 32
            },{
              title: 'menu item 3-3'
              ,id: 33
            }]
          },
          {type: '-'},
          // 第4行
          {
            title: 'menu item 4'
            ,id: 4
            ,child: [{
              title: 'menu item 4-1'
              ,id: 44
              ,child: [{
                title: 'menu item 4-1-1'
                ,id: 444
              },{
                title: 'menu item 4-1-2'
                ,id: 4444
              },{
                title: 'menu item 4-1-3'
                ,id: 44444
              }]
            },{
              title: 'menu item 4-2'
              ,id: 42
            },{
              title: 'menu item 4-3'
              ,id: 43
            }]
          },
          {type: '-'},
          // 第5行
          {
            title: 'menu item 5'
            ,id: 5
            ,child: [{
              title: 'menu item 5-1'
              ,id: 55
              ,child: [{
                title: 'menu item 5-1-1'
                ,id: 555
              },{
                title: 'menu item 5-1-2'
                ,id: 5555
              },{
                title: 'menu item 5-1-3'
                ,id: 55555
              }]
            },{
              title: 'menu item 5-2'
              ,id: 52
            },{
              title: 'menu item 5-3'
              ,id: 53
            }]
          },{type:'-'},
          // 第6行
          {
            title: 'menu item 6'
            ,id: 6
            ,child: [{
              title: 'menu item 6-1'
              ,id: 66
              ,child: [{
                title: 'menu item 6-1-1'
                ,id: 666
              },{
                title: 'menu item 6-1-2'
                ,id: 6666
              },{
                title: 'menu item 6-1-3'
                ,id: 66666
              }]
            },{
              title: 'menu item 6-2'
              ,id: 62
            },{
              title: 'menu item 6-3'
              ,id: 63
            }]
          }]
          ,click: function(item){
            layer.msg(util.escape(JSON.stringify(item)));
          }
        });
      });
  </script>

          
        
<hr>

            <!-- <div class="section_title mb-4 text-center">
                <p class="section_subtitle mx-auto">We serve small and medium sized companies in all tech related industries with high quality growth services which are presented below</p>
            </div> -->
        </div>
        <div class="row justify-content-center" id="app">
            <div class="col-lg-4 col-sm-6 col-12" v-for="item in items">
                <div class="services wow fadeInUp" data-wow-delay="0.2s" data-wow-duration="1.5s">
                    <div class="services-title-icon d-flex">
                        <div class="services-icon">
                            <i class="lni lni-brush"></i>
                        </div>
                        <h4 class="services-title">{{item.name}}</h4><br>
                    </div>
                    <div class="services-content">
                        <p class="text">{{item.slogan}}</p>
                        <span class="label label-info" v-for="itemc in item.label" style="margin-left: 0.5rem;" >{{itemc}}</span><br>
                        <!-- <span class="label label-info">{{item.label02}}</span><br> -->
                        <a class="services-btn" href="#">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- container -->
</section>
<!-- Services Ends -->



<div id="pageh">
    <div>
      <div class="page"  v-show="show">
        <div class="pagelist">
          <span class="jump" :class="{disabled:pstart}" @click="{current_page--}">上一页</span>
          <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
          <span class="ellipsis"  v-show="efont">...</span>
          <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
          <span class="ellipsis"  v-show="ebehind">...</span>

          <span :class="{disabled:pend}" class="jump" @click="{current_page++}">下一页</span>
          <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>

          <span class="jumppoint">跳转到：</span>
          <span class="jumpinp"><input type="text" v-model="changePage"></span>
          <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
        </div>
      </div>
    </div>
  </div>



 <script src="static/js/vue.js"></script>
  <script>
    var newlist = new Vue({
      el: '#pageh',
      data: {
        current_page: 1, //当前页
        pages: 50, //总页数
        changePage:'',//跳转页
        nowIndex:0
      },
      computed:{
         show:function(){
             return this.pages && this.pages !=1
         },
         pstart: function() {
           return this.current_page == 1;
         },
         pend: function() {
           return this.current_page == this.pages;
         },
         efont: function() {
           if (this.pages <= 7) return false;
           return this.current_page > 5
         },
         ebehind: function() {
           if (this.pages <= 7) return false;
           var nowAy = this.indexs;
           return nowAy[nowAy.length - 1] != this.pages;
         },
         indexs: function() {

           var left = 1,
             right = this.pages,
             ar = [];
           if (this.pages >= 7) {
             if (this.current_page > 5 && this.current_page < this.pages - 4) {
               left = Number(this.current_page) - 3;
               right = Number(this.current_page) + 3;
             } else {
               if (this.current_page <= 5) {
                 left = 1;
                 right = 7;
               } else {
                 right = this.pages;

                 left = this.pages - 6;
               }
             }
           }
           while (left <= right) {
             ar.push(left);
             left++;
           }
           return ar;
         },
       },
      methods: {
        jumpPage: function(id) {
          this.current_page = id;
        },
      },

    })
  </script>
    
    <!-- Back Top Top Start -->
    <a href="#" class="back-to-top"><i class="lni lni-chevron-up"></i></a>
    <!-- Back Top Top Ends -->
    <!-- Jquery js -->
    <script src="static/js/jquery-1.12.4.min.js"></script>
    <script src="static/js/modernizr-3.7.1.min.js"></script>

    <!-- Bootstrap js -->
    <script src="static/js/popper.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>

    <!-- Slick js -->
    <script src="static/js/slick.min.js"></script>

    <!-- wow js -->
    <script src="static/js/wow.min.js"></script>

    <!-- Particles js -->
    <script src="static/js/particles.min.js"></script>

    <!-- Main js -->
    <script src="static/js/main.js"></script>

    <script src="static/js/axios.js"></script>

    <!-- label -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- select --> 
    <script src="static/js/selectm.js"></script>
    
   

    <script>
      var app=new Vue({  
          el:'#app',  
          data:{  
               items:[
                 {
                     name:"vue表",
                     slogan:"一个基于vue的PC端表格组件",
                     // url:"https://vxetable.cn/"
                     label:["vue","前端","组件"]                   
                 },
                 {
                     name:"npm",
                     slogan:"Node.js 的包管理工具",
                     label:["JavaScript","前端"]
                 },
                 {
                     name:"Vue-Treeselect",
                     slogan:"一个多选组件，具有对 Vue.js 选项的支持",
                     label:["组件","vue"]
                 },
                 {
                     name:"Python",
                     slogan:"蟒蛇官网",
                     label:["python","教程","网页"]
                 },
                 {
                     name:"学习强国",
                     slogan:"从学习开始，事业从实践开始",
                     label:["自我修养","生活"]
                 },
                 {
                     name:"今晚学习",
                     slogan:"一个一体化的学习平台",
                     label:["java","c++","python"]
                 },
               ]
               
          },
          methods:{

                  test:function(){ //vue的点击触发事件
                  alert("完成vue的点击事件")

                  }
      }

      })  
  </script>


</body>
</html>


